<template>
  <a-card
      class="general-card"
      title="关于系统"
      :header-style="{ border: 'none' }"
  >
    <!-- 系统信息 -->
    <a-descriptions class="detail-container"
                    size="large"
                    :align="{ label: 'right', value: 'left' }"
                    :label-style="{ width: '138px' }"
                    :column="1">
      <!-- 当前版本 -->
      <a-descriptions-item label="当前版本">
        {{ 'v' + app.version }}
      </a-descriptions-item>
      <!-- 更新日志 -->
      <a-descriptions-item label="更新日志">
        <a-textarea v-model="app.body"
                    :auto-size="{ minRows: 3, maxRows: 16 }"
                    readonly>
        </a-textarea>
      </a-descriptions-item>
    </a-descriptions>
  </a-card>

</template>
<script setup lang="ts">
import useLoading from "@/hooks/loading";
import {type versionResp, version} from '@/api/common/index';
const app = ref<versionResp>({
  version:"",
  body:""
})
const {setLoading} = useLoading();
onBeforeMount(async () => {

  // 加载数据
  try {
    setLoading(true);
    const {data} = await version()
    app.value = data
    setLoading(false);
  } catch (e) {
    setLoading(false);
  } finally {
    setLoading(false);
  }

})

</script>


<style scoped lang="less">
:deep(.arco-card-header-title) {
  font-weight: bold;
}

@form-width: 628px;
.general-card {
  width: @form-width;
}


</style>